<template>
  <div class="login_container" @mousewheel.prevent ref="appRef">

    <!-- 左侧图标区 -->
    <div class="login_left">
      <video loop autoplay muted class="fillWidth" v-on:canplay="canplay">
        <source src="../../assets/video/background.mp4" type="video/mp4" />
      </video>
    </div>
    <!-- 登录区 -->
    <div class="login_section">
      <div class="logo">
        <img src="../../assets/images/logo-aside.svg" alt="">
        <p>欢迎登录Ploto自动驾驶研发平台</p>
      </div>
      <!-- 登录表单区域 -->
      <el-form 
        :model="isDomainAccount === true? ADUserLoginForm:loginForm" 
        :rules="isDomainAccount === true? ADUserLoginFormRules:loginFormRules" 
        ref="loginFormRef" 
        class="login_form">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="密码登录" name="login">
            <!-- 用户名 -->
            <el-form-item prop="username" v-if="!isDomainAccount">
              <el-input placeholder="请输入用户名" v-model="loginForm.username" clearable>
              </el-input>    
            </el-form-item>
            <!-- 密码 -->
            <el-form-item prop="password" v-if="!isDomainAccount">
              <el-input 
                type="password" 
                placeholder="请输入密码" 
                v-model="loginForm.password" 
                show-password 
                @keydown.enter.native="login">
              </el-input>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="域账号登录" name="ADUserlogin">
            <!-- 域账号 -->
            <el-form-item prop="ADUserLogin" v-if="isDomainAccount">
              <el-input placeholder="请输入域账号" v-model="ADUserLoginForm.ADUserLogin">
              </el-input>
            </el-form-item>
            <!-- 域密码 -->
            <el-form-item prop="password" v-if="isDomainAccount">
              <el-input 
                type="password" 
                placeholder="请输入密码" 
                v-model="ADUserLoginForm.password"
                @keydown.enter.native="login">
              </el-input>
            </el-form-item>
          </el-tab-pane>  
        </el-tabs>    
        <!-- 按钮区域 -->
        <div class="btn_section">
          <div class="login_select">
            <div @click="forgetPassword" class="forget_password">忘记密码？</div>
          </div>
          <div class="login_btn" @click="login">登录</div>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      ADUserLoginForm: {
        ADUserLogin: '',
        password: ''
      },
      // loginAutoData: false,
      isDomainAccount: false,
      // 表单的验证规则
      loginFormRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      },
      ADUserLoginFormRules: {
        ADUserLogin: [
          { required: true, message: '请输入域账号', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      },
      activeName: 'login',
    }
  },
  created() {
  },
  methods: {
    canplay() {
      this.vedioCanPlay = true
    },
    // 用户名密码登录
    login() {
      this.$refs.loginFormRef.validate(valid => {
        if (!valid) return
        this.$url.post('login', this.loginForm)
          .then( res => {
            if (res.status !== 200) return this.$message.error('账号或密码错误')
            this.$stor.set('X-CSRFToken', res.data.CSRFToken, 7)
            this.$message.success('登录成功')
            this.$router.push({path:'/index'})
          })
      })

    },
    // 域账号登录
    domainAccountLogin() {
      this.isDomainAccount = !this.isDomainAccount;
    },
    // 忘记密码
    forgetPassword() {
      this.$router.push({path:'/ForgetPasswordPage'})
    },
    handleClick(tab, event) {
      if(tab._props.name == 'ADUserlogin') this.isDomainAccount = true;
      else this.isDomainAccount = false;
    },
  }
}
</script>
<style lang="less">
@-moz-document url-prefix() { /* Disable scrollbar Firefox */
  html{
    scrollbar-width: none;
  }
}
body::-webkit-scrollbar {
  display: none;   //chrome
}
body {
  -ms-overflow-style: none; //edge
  scrollbar-width: none;  //firefox
}
.login_container {
  margin: 0;
  width: 100%;
  height: 100%;
  background-color: #f7f7f7;
  .login_left {
    position: fixed;
    height: 100%;
    width: 100%;
    .fillWidth {
      height: calc(100% + 50px);
      width: 100%;
      object-fit: fill;
      overflow-y: hidden;
      margin-top: -50px;
    }
  }
  .login_section {
    width: 600px;
    height: 100%;
    position: absolute;
    right: 0px;
    box-sizing: border-box;
    background: rgba(255,255,255, .8);
    border-left: 1px solid #ffffff;
    box-shadow: -1px 0px 0 0 rgba(211,211,211,0.50);
    border-radius: 4px;
    .logo {
      font-family: PingFangSC-Regular;
      font-size: 25px;
      line-height: 28px;
      color: #131416;
      margin-top: 120px;
      margin-bottom: 95px;
      text-align: center;
      img {
        width: 240px;
        height: 60px;
      }
    }
    .login_form {
      padding: 0px 120px;
      box-sizing: border-box;
      .el-tabs__content {
        margin-top: 50px;
      }
      .el-input__inner {
        border-top: none;
        border-left: none;
        border-right: none;
      }
      .userIcon {
        margin-top: 12px;
      }
      .el-input__inner {
        height: 38px;
        line-height: 38px;
        font-size: 14px;
        border-radius: 0;
        padding-left: 0;
        background-color: #fff;
      }
      .el-input__prefix, .el-input__suffix {
        line-height: 38px;
      }
      .btn_section {
        .login_select {
          display: flex;
          flex-flow: row nowrap;
          flex-direction: row-reverse;
          .forget_password {
            color: #252B3A;
            font-size: 14px;
            cursor: pointer;
            &:hover {
              color: #0A4CEE;
            }
          }
        }
        .login_btn {
          width: 100%;
          height: 50px;
          margin-top: 85px;
          text-align: center;
          line-height: 50px;
          color: #fff;
          font-size: 18px;
          background-color: #0A4CEE;
          border-radius: 24px;
          box-shadow: 0 2px 5px 0 rgba(137, 126, 126, 0.3);
          &:hover {
            box-shadow: 0 5px 7px 0 rgba(10,76,238,0.3);
            cursor: pointer;
          }
        }
      }
    }
    .el-tabs__nav .is-top{
      font-size: 18px;
      color: #A1A1A1;        
    }           
    .is-active {
      color: #131416 !important; 
    }  
    .el-tabs__item:hover {
      color: #131416 !important; 
    }   
    .el-tabs__active-bar {
      background-color: #131416;
    }
    .el-tabs__nav-wrap::after {
      display: none;
    }
  }
}
</style>
